/* stylelint-disable length-zero-no-unit */
/* stylelint-disable selector-class-pattern */

.demo-block,.demo-block2 {
  display: block;
  width: 300px;
  height: 300px;
  overflow: hidden;
  background: red;
}

.transition {
  // transition: background 0.3s, height 1.3s, opacity 1.3s;
  // transition: opacity 5s;
  // transition: all 5s!important;
  transition: height 5s;

  &.transition-appear,
  &.transition-enter {
    height: 0px;
  }

  // &.transition-enter.transition-enter-start {
  //   height: 50px;
  // }

  &.transition-appear.transition-appear-active,
  &.transition-enter.transition-enter-active {
    height: 300px;
  }


  &.transition-leave-active {
    background: green;
    height: 0px;
  }
}


.hidden {
  display: none !important;
}



.animation {
  animation-duration: 1.3s;
  animation-fill-mode: both;

  &.animation-appear,
  &.animation-enter {
    animation-name: enter;
    animation-play-state: paused;
    animation-fill-mode: both;
  }

  &.animation-appear.animation-appear-active,
  &.animation-enter.animation-enter-active {
    animation-name: enter;
    animation-play-state: running;
  }

  &.animation-leave {
    animation-name: leave;
    animation-play-state: paused;
    animation-fill-mode: both;

    &.animation-leave-active {
      animation-name: leave;
      animation-play-state: running;
    }
  }
}

@keyframes enter {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes leave {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}
